<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>自定义按钮</p>
        <my-button name="测试组件按钮" @click="showTip()"></my-button>
        <hr>
        <!-- 
            .native - 监听组件根元素的原生事件。==> 将组件标签上绑定的事件作为当前组件根元素的事件进行传递
            此时该事件不会再被记录为当前组件自定义事件 （$listeners 将不再记录该事件，$emit不能触发该事件）
         -->
        <my-button-b name="测试组件按钮" @click.native="showTip()"></my-button-b>
    </div>


    <script type="text/x-template" id="my-btn">
        <!-- <button @click=" exClick() ">{{ name }}</button> -->
        <!-- 
            vue页面语法中所对应的操作，除了可以直接完成仓库中变量的操作以外，
            在当前vue实例根元素上绑定的属性或方法都可以被操作 （包括原型方法和原型属性）
        -->
        <button @click=" $emit('click') ">{{ name }}</button>
    </script>

    <script type="text/x-template" id="my-btn2">
        <button>{{ name }}</button>
    </script>

    <script>
        Vue.component("MyButton",{
            template:"#my-btn",
            props:{
                name:{
                    type:String,
                    default:""
                }
            },
            methods:{
                exClick(){
                    console.log(this)
                    this.$emit("click")
                }
            }
        })
        Vue.component("MyButtonB",{
            template:"#my-btn2",
            props:{
                name:{
                    type:String,
                    default:""
                }
            },
            created() {
                console.log(this.$listeners );
            },
        })

        new Vue({
            el:"#app",
            methods: {
                showTip(){
                    alert("事件被触发")
                }
            },
            
        })
    </script>
</body>
</html>